<script setup lang="ts">
export interface Props {
  show: boolean
}

const props = withDefaults(defineProps<Props>(), {
  show: true,
})


</script>

<template>
  <transition name="fade">
    <div class="flex justify-center items-center w-lvw h-svh absolute bg-background z-50" v-show="props.show">
      <IconCSS name="svg-spinners:180-ring" size="4rem"/>
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>